壁紙の位置指定

初心者のためのＨＰの飾りつけ教室VOL.9

【更新2004/10/11　お詫び！】
2003/10/23 のタグ規制でここから下のタグは使えなくなりました。
onload=body.style.　というタグが使えません。
ですから、ＢＯＤＹ　内に命令が出せなくなりました。
楽天では使えませんが、参考のために残して起きます。
ご承知おき下さい。

■【ＨＰの飾りつけ教室VOL.9】壁紙を上に！左に！右に！固定してみよう。

★ 壁紙でＨＰをセンスアップしよう！ ★

前回は、各ページに壁紙を指定する方法をやりました。
壁紙は自動で「リピート」されて、ブラウザ画面全体に表示されます。

では、今回は壁紙を「リピート」させないようにして、「一行表示」「一列表示」
をやってみましょう。
また、「一枚だけ表示する」事も出来ます。

一枚表示の背景、一行、一列表示の背景は普通に画像を並べても出来ます。
しかし、画像の上にはテキストは載せられません。
画像を背景画像にすれば、その上にテキストを載せる事が出来ます。
背景画像には、そういう利点があります。(^_-)-☆

では、前回のおさらいで壁紙を貼りつける、タグを書いてみましょう。

という風になりますね。(*^^)v

↓下のブラウザもどきのテーブルに、一枚だけ背景画像を載せてみましょう。

　　ファイル　編集　表示　お気に入り　ツール　ヘルプ

□

↓このようにタグを書きますと、背景画像は左上に１枚だけ表示されます。

----------------------------------------------------------

<IMG src="～背景画像のＵＲＬ～"onLoad=this.style.display="none"; body.background=this.src;body.style.backgroundAttachment="fixed"; body.style.backgroundRepeat="no-repeat">

----------------------------------------------------------
注：このタグをコピペで貼り付ける時は、bodyの前に、半角のスペースがいれてありますから、スペースを取り除いてください。(２箇所あります）

では、この背景画像の配置を変えてみましょう。
上のタグに位置(position)を命令するタグを追加します。

;body.style.backgroundPosition="～位置～"

「～位置～」の属性は、　　top　　　　　ブラウザの上端中央
　　　　　　　　　　　　　　　　center　　　ブラウザの中央
　　　　　　　　　　　　　　　　bottom　　　ブラウザの下端中央
　　　　　　　　　　　　　　　　left　　　　　ブラウザの左端中央
　　　　　　　　　　　　　　　　right　　　　　ブラウザの右端中央

一つタグを書いてみましょう。「位置」を「center」にしてみましょう。

　　ファイル　編集　表示　お気に入り　ツール　ヘルプ

□

↓このようにタグを書きますと、背景画像は中央に１枚だけ表示されます。
----------------------------------------------------------
<IMG src="～背景画像のＵＲＬ～"onLoad=this.style.display="none"; body.background=this.src;body.style.backgroundAttachment="fixed"; body.style.backgroundRepeat="no-repeat";body.style.backgroundPosition="center">
----------------------------------------------------------

注：このタグをコピペで貼り付ける時は、bodyの前に、半角のスペースがいれてありますから、スペースを取り除いてください。(２箇所あります）

このようになります。お判りでしょうか。

では次に、一行だけの表示、一列だけの表示をやってみましょう。
まずは、上に一行壁紙を貼りつけるためのタグです。

　　ファイル　編集　表示　お気に入り　ツール　ヘルプ

□

↓このようにタグを書きますと、
背景画像は一番上に一行だけ表示されます。
----------------------------------------------------------
<IMG src="～背景画像のＵＲＬ～"onLoad=this.style.display="none"; body.background=this.src;body.style.backgroundAttachment="fixed"; body.style.backgroundRepeat="repeat-x";body.style.backgroundPosition="top">
----------------------------------------------------------
注：このタグをコピペで貼り付ける時は、bodyの前に、半角のスペースがいれてありますから、スペースを取り除いてください。(２箇所あります）

先ほどと違いますのは、「リピート」をさせない、タグ　"no-repeat"の所に"repeat-x"を
入れている事です。
これは、Ｘ軸方向（行方向）だけ背景画像を「リピート」しなさいと命令を出しています。

;body.style.backgroundPosition="～位置～"

「～位置～」の属性は、　　top　　　　　ブラウザの上端
　　　　　　　　　　　　　　　　center　　　ブラウザの中央
　　　　　　　　　　　　　　　　bottom　　　ブラウザの下端

位置の属性は↑このようになります。

今度は、左端一列に表示してみましょう。
"repeat-x"のところを"repeat-y"として、Ｙ軸方向（列方向）だけ
背景画像を「リピート」しなさいと命令を出せばいいのです。

　　ファイル　編集　表示　お気に入り　ツール　ヘルプ

□

タグはこうなります。

<IMG src="～背景画像のＵＲＬ～"onLoad=this.style.display="none"; body.background=this.src;body.style.backgroundAttachment="fixed"; body.style.backgroundRepeat="repeat-y";body.style.backgroundPosition="lift">
----------------------------------------------------------
注：このタグをコピペで貼り付ける時は、bodyの前に、半角のスペースがいれてありますから、スペースを取り除いてください。(２箇所あります）

;body.style.backgroundPosition="～位置～"

「～位置～」の属性は、
　　　　　　　　　　　　　　　　　　center　　　ブラウザの中央
　　　　　　　　　　　　　　　　　　left　　　　　ブラウザの左端
　　　　　　　　　　　　　　　　　　right　　　　　ブラウザの右端

ここぞというページは、背景を変えて、ページのセンスアップに挑戦してみてください。
しかし、背景が主体みたいなページにはしないように注意しましょうね。
あくまでも、テキストが主体です。

ではでは！【ＨＰの飾りつけ】みなさんがんばってください。（*^_^*）

【飾りつけ教室　ＭＥＮＵ】にもどる。